<template>
  <div>

    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left;">
        <div class="manager-all">
          <div class="project-manager"></div>
          <div class="project-item">
            <el-breadcrumb-item :to="{ path: '/' }"
            >分子设计详情
            </el-breadcrumb-item
            >
          </div>
        </div>
      </el-breadcrumb>

<!--      v-if="roleDetail.perm===0"-->
<!--      perm 0完全 1只读 source 0自己  1分享 2组-->
<!--      如果是1 那么一定不是自己的 那么只有返回列表-->
<!--      如果是0 看source 如果为0 展示3 如果为1和2 展示俩-->
      <el-row :gutter="5" style="float: right;">
        <div v-if="roleDetail.perm===1">
            <el-button type="primary" @click="gotolink" class="add"
            >返回列表
            </el-button>
        </div>
        <div v-else-if="roleDetail.source===0">
          <el-col :span="8" class="row-flex">
            <el-button type="primary" @click="openShareDialog" class="add"
            >分享
            </el-button>
          </el-col>
          <el-col :span="8" class="row-flex">
            <el-button  type="primary" @click="showEditDialog" class="add"
            ><img src="../../icon标/修改.png" class="addimg" alt="">
              修改
            </el-button>
          </el-col>
          <el-col :span="8" class="row-flex">
            <el-button type="primary" @click="gotolink" class="add"
            >返回列表
            </el-button>
          </el-col>
        </div>
        <div v-else>
          <el-col :span="12" class="row-flex">
            <el-button  type="primary" @click="showEditDialog" class="add"
            ><img src="../../icon标/修改.png" class="addimg" alt="">
              修改
            </el-button>
          </el-col>
          <el-col :span="12" class="row-flex">
            <el-button type="primary" @click="gotolink" class="add"
            >返回列表
            </el-button>
          </el-col>
        </div>
      </el-row>

      <hr
        style="width: 1642px;
                height: 1px;
                border:none;
                background: #E8ECF0;
                margin-left:-23px;
                margin-top:60px;"
      />


      <table border="1" cellspacing="0">
        <tr>
          <td class="color">化合物编号:</td>
          <td class="color1">{{ roleDetail.sid }}</td>
          <td class="color">化合物结构smiles:</td>
          <td class="color1">{{ roleDetail.structureSmiles }}</td>
        </tr>
        <tr>
          <td class="color">研发项目:</td>
          <td class="color1">{{ roleDetail.project }}</td>
          <td class="color">理论值clog P:</td>
          <td class="color1">{{ roleDetail.clogP }}</td>
        </tr>
        <tr>
          <td class="color">分子量:</td>
          <td class="color1">{{ roleDetail.mw }}</td>
          <td class="color">理论值tPSA:</td>
          <td class="color1">{{ roleDetail.tpsa }}</td>
        </tr>
        <tr>
          <td class="color">信息录入日期:</td>
          <td class="color1">{{ roleDetail.inputDate | timestampToTime }}</td>
          <td class="color">理论值 HBD:</td>
          <td class="color1">{{ roleDetail.hbd }}</td>
        </tr>
        <tr>
          <td class="color">信息录入人员:</td>
          <td class="color1">{{ roleDetail.keyboarder }}</td>
          <td class="color">设计人员:</td>
          <td class="color1">{{ roleDetail.designer }}</td>
        </tr>
        <tr style="height: 25vh;">
          <td class="color">化合物结构:</td>
          <td class="color1">
            <el-image
              class="table-image"
              :src="this.now_url.now_url+`server_static/${roleDetail.structureUrl}`"
            >
              <div slot="error" class="image-slot">
                <span class="table-item-span">图片加载失败或不存在</span>
              </div>
            </el-image>
            <el-link
              class="bigimg"
              type="primary"
              plain
              @click="showPreview"
            >点击预览大图
            </el-link>
            <el-dialog :visible="visible" @close="handleClose">
              <img style="width: 100% !important;height: 100%;"
                   :src="this.now_url.now_url+`server_static/${roleDetail.structureUrl}`"/>
            </el-dialog>
          </td>
          <td class="color">评估模型:</td>
          <td class="color1">
            <el-upload
              class="upload-demo"
              :action="url+`uploadPse`"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :headers="headerObj">
              <img src="../../icon标/评估.png" class="pinggu">
            </el-upload>
            <el-link
              class="add-button1"
              type="primary"
              @click="uploadPse(roleDetail.moduleUrl)"
              plain
            >点击下载
            </el-link>
          </td>
        </tr>
        <tr>
          <td class="color">是否合成:</td>
          <td class="color1" colspan="3">{{ roleDetail.isCompound }}</td>
        </tr>
      </table>


      <!--修改用户的对话框-->
      <el-dialog
        title="修改化合物"
        :visible.sync="editMdVisible"
        width="1300px"
        @close="editMdClosed"
      >

        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <el-form
          :model="roleDetail"
          :rules="editMdRules"
          ref="editMdRef"
          label-width="140px"
        >
          <!--          让其重新上传？ 还要给他下载的位置？-->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-row style="margin-top:30px;">
                <el-col :span="8">
                  <el-form-item label="化合物编号 :" prop="sid">
                    <el-input v-model="roleDetail.sid" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="虚拟化合物编号 :" prop="vid">
                    <el-input v-model="roleDetail.vid" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="化合物结构smiles :"
                    prop="structureSmiles"
                  >
                    <el-input v-model="roleDetail.structureSmiles"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="研发项目 :" prop="project">
                    <el-input v-model="roleDetail.project"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="分子量 :" prop="mw">
                    <el-input v-model="roleDetail.mw"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="理论值 clog P :" prop="clogP">
                    <el-input v-model="roleDetail.clogP"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="理论值 tPSA :" prop="tpsa">
                    <el-input v-model="roleDetail.tpsa"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="理论值 HBD :" prop="hbd">
                    <el-input v-model="roleDetail.hbd"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="信息录入日期 :" prop="inputDate">
                    <el-date-picker
                      v-model="roleDetail.inputDate"
                      value-format="timestamp"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%;"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="设计人员 :" prop="designer">
                    <el-input v-model="roleDetail.designer"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否合成 :" prop="compound">
                    <el-switch v-model="roleDetail.compound"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="化合物结构 :" prop="structureUrl">
                    <el-upload
                      v-model="roleDetail.structureUrl"
                      class="upload-demo"
                      ref="cs"
                      :limit="1"
                      show-file-list
                      :action="url+`uploadPic`"
                      :on-preview="handlePreview"
                      :on-remove="handleCsRemove"
                      :on-success="csHandleSuccess"
                      :on-error="csHandleError"
                      :file-list="fileList"
                      :before-upload="beforePicUpload"
                      drag
                      :headers="headerObj"
                    >
                      <div style="margin-top:35px;">
                        <img src="../../icon标/选取图片.png" alt="">
                      </div>
                      <div class="el-upload__text">
                        选取jpg/png文件
                      </div>
                      <div slot="tip" class="el-upload__tip"></div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="评估模型 :" prop="moduleUrl">
                    <el-upload
                      v-model="roleDetail.moduleUrl"
                      class="upload-demo"
                      ref="am"
                      :limit="1"
                      show-file-list
                      :action="url+`uploadPse`"
                      :on-preview="handlePreview"
                      :on-remove="handleAmRemove"
                      :on-success="amHandleSuccess"
                      :on-error="amHandleError"
                      :file-list="fileList"
                      :before-upload="beforePseUpload"
                      drag
                      :headers="headerObj"
                    >
                      <div style="margin-top:35px;">
                        <img src="../../icon标/选取文件.png" alt="">
                      </div>
                      <div class="el-upload__text">
                        选取pse文件
                      </div>
                      <div slot="tip" class="el-upload__tip"></div>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editMdVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="editMd"
            style="margin-left:50px;margin-bottom:15px;"
          >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
    <el-dialog
      :visible.sync="shareVisible"
      title="分享给其他成员"
      width="1200px"
      @close="shareDialogClosed"
    >
      <el-row>
        <el-col :span="12">
          <el-table
            :data="sharedList"
            border
            stripe
            style="width:100%"
            class="mdTable"
            :header-cell-style="{ background: '#F6F7FB' }"
            max-height="300"
          >
            <el-table-column
              label="分享人员"
              prop="username"
            ></el-table-column>
            <el-table-column
              label="权限"
              prop="permission">
              <template slot-scope="scope">
                <el-tag  v-if="scope.row.permission === 1">只读</el-tag>
                <el-tag  type="success" v-else-if="scope.row.permission === 0">读写</el-tag>
                <el-tag  type="warning" v-else>无权限</el-tag>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
        <el-col :span="12">
          <el-form
            :model="shareForm"
            :rules="shareRules"
            ref="shareRef"
            label-width="140px"
          >
            <!--          让其重新上传？ 还要给他下载的位置？-->
            <el-row style="margin-top:30px;">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="化合物ID :" prop="sid">
                    <el-input v-model="roleDetail.sid" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="化合物ID :" prop="permission">
                    <el-select v-model="shareForm.permission" placeholder="请选择">
                      <el-option label="只读" :value="1"></el-option>
                      <el-option label="读写" :value="0"></el-option>
                      <el-option label="无权限" :value="-1"></el-option>
                    </el-select>
                  </el-form-item>

                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名 :" prop="username">
                    <el-input v-model="shareForm.username"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱 :" prop="email">
                    <el-input v-model="shareForm.email"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-alert
                title="请至少填写一个分享的用户名和邮箱"
                type="info">
              </el-alert>
            </el-row>
          </el-form>
        </el-col>
      </el-row>


      <span slot="footer" class="dialog-footer">
          <el-button @click="shareVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="addShare"
            style="margin-left:50px;margin-bottom:15px;"
          >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getCookie} from "../../utils/util";

export default {
  name: 'DetailsPage',
  components: {},
  data() {
    return {
      // 所有角色列表
      roleDetail: {
        structureUrl: "",
        structureSmiles: "",
        vid: "",
        sid: "",
        mw: "",
        clogP: "",
        tpsa: "",
        hbd: "",
        designer: "",
        project: "",
        moduleUrl: "",
        compound: false,
        inputDate: "",
        type: 1
      },
      id: "",
      // 所有角色列表
      // mdList: [],
      // 以下是弹出框
      //是否显示弹出框
      addFormVisible: false,
      //要提交的表单信息
      addForm: {
        structureUrl: "",
        structureSmiles: "",
        vid: "",
        sid: "",
        mw: "",
        clogP: "",
        tpsa: "",
        hbd: "",
        designer: "",
        project: "",
        moduleUrl: "",
        compound: false,
        inputDate: "",
        type: 1
      },
      fileList: [],
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 1,
        type: 1
      },
      total: 0,
      // 监听 分页的size 改变的事件
      query: "",
      // 控制修改用户对话框的显示和隐藏
      editMdVisible: false,
      editMdRules: {},
      shareRules: {},
      visible: false,
      shareVisible: false,
      sharedList: [],
      shareForm: {
        username: '',
        email: '',
        sid: '',
        permission: ''
      },
      // 图片上传组件的headers请求头对象
      headerObj: {
        token: getCookie('token')
      },
      url: this.now_url.now_url

    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this._getDetail();
    this.id = this.$route.params.id;
    console.log(this.headerObj.token)
  },
  mounted() {
    let times = new Date().getTime();
    // console.log(times)
    this.addForm.inputDate = times;
  },
  methods: {
    async _getDetail() {
      // var that = this;
      var sid = this.$route.params.id;
      this.queryInfo.query = sid

      const {data: res} = await this.$axios.get("get", {
        params: this.queryInfo
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取信息列表失败！");
      }
      this.roleDetail = res.data[0];
      console.log(this.roleDetail)
    },
    showPreview() {
      this.visible = true
    },
    handleClose() {
      this.visible = false
    },
    beforePicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG || isPNG;
    },
    beforePseUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isPse = fileType === ".pse";
      console.log(fileName);
      console.log(fileType);
      console.log(isPse);
      if (!isPse) {
        this.$message.error("上传头像图片只能是 Pse 格式!");
      }
      return isPse;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleCsRemove(file, fileList) {
      //删除之后 清空url
      this.roleDetail.structureUrl = "";
      this.addForm.structureUrl = "";
      // this.$message("文件已删除")
    },
    handleAmRemove(file, fileList) {
      //删除之后 清空url
      this.roleDetail.moduleUrl = "";
      this.addForm.moduleUrl = "";
      // this.$message("文件已删除")
    },
    csHandleSuccess(res, file) {
      // console.log(res)
      // console.log(file)
      this.roleDetail.structureUrl = res.msg;
      this.addForm.structureUrl = res.msg;
      this.$message.success("化合物结构提交成功！");
      console.log(this.mdList);
      console.log(res)
      console.log('XXXXXXXXXXXX')
    },
    csHandleError() {
      this.$message.error("化合物结构提交失败！");
    },
    amHandleSuccess(res, file) {
      this.roleDetail.moduleUrl = res.msg;
      this.addForm.moduleUrl = res.msg;
      this.$message.success("评估模型提交成功！");
    },
    amHandleError() {
      this.$message.error("评估模型提交失败！");
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
    uploadPse(fileName) {
      console.log('filename')
      console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    // 展示编辑化合物的对话框
    showEditDialog() {
      //通过sid找到mdList的相关信息
      // for (let i = 0; i < this.mdList.length; i++) {
      //   if (sid === this.mdList[i].sid) {
      //     // this.editForm = this.mdList[i]
      //     this.editForm = JSON.parse(JSON.stringify(this.mdList[i]));
      //   }
      // }
      // if (this.editForm.sid == null) {
      //   return this.$message.error("未找到该化合物信息！");
      // }
      this.editMdVisible = true;
    },
    editMdClosed() {
      this.$refs.editMdRef.resetFields();
      this.$refs.cs.clearFiles();
      this.$refs.am.clearFiles();
      this.addForm.moduleUrl = "";
      this.addForm.structureUrl = "";
    },
    // 修改化合物信息并提交
    editMd() {
      this.$refs.editMdRef.validate(async valid => {
        //source 0自己  1分享 2组 对应接口
        var source=this.roleDetail.source
        this.roleDetail.type = 1;
        if (!valid) return;
        // 发起修改化合物信息的请求
        if(source===0){
          const {data: res} = await this.$axios.put("/update", this.roleDetail);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        }else if(source===1){
          const {data: res} = await this.$axios.put("/updateShare", this.roleDetail);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        }else if(source===2){
          const {data: res} = await this.$axios.put("/updateGroup", this.roleDetail);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        }else {
          return this.$message.error("数据来源错误！");
        }
        // 关闭对话框
        this.editMdVisible = false;
        // 刷新数据列表
        await this._getDetail();
        // 提示修改成功
        this.$message.success("更新化合物结构成功");
      });
    },
    gotolink() {

      //指定跳转地址
      this.$router.push({path:'/add/molecularDesign',query:{page:this.$route.query.page,size:this.$route.query.size}})
    },
    async openShareDialog() {
      this.sharedList=[]
      // 得到分享了的人
      const {data: res} = await this.$axios.get("getShared");
      //得到了所有权限列表

      res.data.forEach(row => {
        if (this.roleDetail.sid === row.sid) {
          this.sharedList.push({
              username : row.username,
              permission : row.permission
          }
          )

        }
      });

      if (res.code !== 200) {
        return this.$message.error("获取角色列表失败！");
      }
      this.shareVisible = true

    },
    async addShare() {
      //添加分享
      let form = {
        username: this.shareForm.username,
        email: this.shareForm.email,
        sid: this.roleDetail.sid,
        permission: this.shareForm.permission
      }
      console.log(form)
      const {data: res} = await this.$axios.post('share', form);
      console.log(res)
      if (res.code !== 200 && res.msg !== '成员已经存在') {
        return this.$message.error("分享失败！");
      }
      this.$message.success("分享成功！");
      // 隐藏添加用户的对话框
      this.shareVisible = false;
      // 重新获取用户的列表
      await this._getDetail()
    },
    shareDialogClosed() {
      this._getDetail()
      this.shareForm.email = ""
      this.shareForm.permission = ""
      this.shareForm.username = ""
      // this.$refs.addUserRef.resetFields();
    },
  },

}


</script>

<style scoped>
.manager-all {
  margin-top: 6px;
  display: flex;
  height: 30px;
  width: 140px;
  justify-content: center;
  margin-bottom: 30px;
}

.project-manager {
  width: 4px;
  height: 30px;
  background: #4087fc;
}

.project-item {
  width: 108px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
  margin-left: 10px;
  line-height: 30px;
}

.add {
  width: 95px;
  height: 36px;
  background: #4087FC;
  border-radius: 6px;
  margin-left: 10px;
}

.row-flex {
  display: flex;
  justify-content: flex-end;
}

.addimg {
  width: 22px;
  height: 16px;
  margin-left: 0px;
  margin-top: 0;
  float: left;
}

.demo-table-expand label {
  color: #000000 !important;
}

.demo-table-expand {
  font-size: 0;
}

/*
.demo-table-expand label {

  color: #99a9bf;
} */

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
  border-right: 1px;
}

.table-item-span {
  line-height: 50px;
}

/* .expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  line-height: 50px;
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
} */
.table-image {
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}

.filename1 {
  float: right;
  margin-right: 50px;
  margin-top: -65px;
}

.add-button1 {
  margin-left: 80px;
  margin-top: -100px;
}

.pinggu {
  width: 61px;
  height: 63px;
  margin-left: 5px;
  margin-top: 50px;
}

.bigimg1 {
  float: right;
  margin-right: 30px;
}

.el-form-item__label {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: blod;
  color: #000000;
  line-height: 96px;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold !important;
  color: #000000;
}

table {
  width: 90%;
  height: 100%;
  border: 1px solid #B8D0EF;
  border-collapse: collapse;
  margin: 30px auto;
}

.color {
  background: #EAF2FF;
  border: 1px solid #B8D0EF;
  height: 30px;
  text-align: right;
  padding-right: 15px;
}

.color1 {
  padding-left: 10px;
}

td {
  height: 6vh;
}
</style>
<style>
/* .vue-directive-image-previewer-img {
  cursor: pointer;
  left: 540px !important;
  width: 500px !important;
  height: 603px;
  transition: all 0ms ease 0ms;
} */
.el-image__inner {
  width: 270px !important;
  height: 170px !important;
  margin: 20px;
}

.el-dialog {
  /* background-color: #191b1d; */
  width: 50vw;
}
</style>
